

<!-- tabs -->					
<div id="tabs">

    <!-- tab headers -->
	<ul>
	{foreach from=$collections key=i item=a}
		<li><a href="#tabs-{$a->id}">{$a->title}</a></li>
	{/foreach}		
		<li><a href="#" onclick="addCollection()">+</a></li>
	</ul>
    
    <!-- plus button / adding photos -->
	{foreach from=$collections key=i item=a}
    <div id="tabs-{$a->id}">
    	<p>{$a->description}</p>
    	<span style="margin-left: 10px" class="btn btn-success fileinput-button" >
    		<span>Добавить</span>
            <input class="fileupload" type="file" name="files{$a->id}" data-url="gallery/uploadImage/{$a->id}" />
    	</span>
        
        <button type="button" class="btn btn-danger delete" onclick="deleteCollection({$a->id})">
			<i class="icon-trash icon-white"></i>
			<span>Удалить Все</span>
    	</button>
        
        <!-- photos -->
        <div id="gallery_container{$a->id}"></div>
        <div class="clear"></div>        
    </div>
	{/foreach}
    
</div>

<!-- Dialogs -->
<div id="addGalleryCollection" style="display: none">
    <p>{form_label('Title', 'title')}
		{form_input("title")}</p>
    <p>{form_label('Description', 'description')}
		<textarea name="description" style="width: 460px; height: 100px"></textarea></p>
</div>
<!-- END Dialogs -->

<!-- Dialogs -->
<div id="editImage" style="display: none">
    <div id="updatingImg" style='float:left;'>
        <img src="" />
    </div>
    <div>
        <input id="updatingImgTitle" type="text" name="title" style='width: 280px; margin-left: 10px;' />
        <textarea id="updatingImgDescription" name="description" style='width: 280px; height:470px; margin-left: 10px;'></textarea>
    </div>
</div>
<!-- END Dialogs -->

<!-- Dialogs -->
<div id="errorMasseageDialog" style="display: none">
</div>	
<!-- END Dialogs -->

<script src="{site_url('js/jquery-ui.min.js')}" type="text/javascript"></script>
<script src="{site_url('js/uploader/vendor/jquery.ui.widget.js')}"></script>
<script src="{site_url('js/uploader/jquery.iframe-transport.js')}"></script>
<script src="{site_url('js/uploader/jquery.fileupload.js')}"></script>
<script src="{site_url('js/imgbox/jquery.imgbox.pack.js')}" type="text/javascript"></script>
<script src="{site_url('js/jquery.contenthover.js')}"></script>

<script>

    var site_url = "{site_url()}";
    var tabMapping = {
        {foreach from=$collections key=i item=a}
        {$i}: {$a->id},
        {/foreach}
    }

    {if isset($error) && $error != ''}
        $('#errorMasseageDialog').html("{$error}");
        $('#errorMasseageDialog').dialog('open');
    {/if}
 
    {literal}
    
    var currentEditingImg = -1;

	function addCollection()
	{
		$("#addGalleryCollection").dialog('open');
	}

    function deleteCollection(colID)
    {
        var url = site_url+"admin/gallery/deleteCollection/"+colID;
        $.post(url,{},function(data) {
	       if(data != ""){
				$("#errorMasseageDialog").empty().html(data);
				$("#errorMasseageDialog").dialog('open');
			} else {
				location.reload();
			}
        });
    }

	function submitCollectionForm()
	{
		var title = $("input[name='title']", "#addGalleryCollection").val();
		var description = $("textarea[name='description']", "#addGalleryCollection").val();
		$.post(site_url+"admin/gallery/addCollection",{title: title, description: description},function(data) {
		    if(data != ""){
			   $("#errorMasseageDialog").empty().html(data);
			   $("#errorMasseageDialog").dialog('open');
            } else {
				$("#addGalleryCollection").dialog('close');
                location.reload();
            }
	   });
	}

    function deleteImg(imgID)
    {
        var url = site_url+"admin/gallery/deleteImage/"+imgID;
        $.post(url,{},function(data) {
            if (data != "") {
	           $("#errorMasseageDialog").empty().html(data);
			   $("#errorMasseageDialog").dialog('open');
            }
            getGalleryImages(tabMapping[$("#tabs").tabs('option', 'selected')]);
        });
    } 
    
    function editImg(imgID,thumb) 
    {
        currentEditingImg = imgID;
        var url = site_url+"admin/gallery/getImageTexts/"+imgID;
        $.post(url,{},function(data) {
            var jsdata=$.parseJSON(data);
            $("#updatingImgTitle").val(jsdata.title);
            $("#updatingImgDescription").val(jsdata.desc);
        });
        $("#updatingImg").html("<img src="+site_url+"/uploads/images/data/gallery/"+thumb+" />");
        $("#editImage").dialog('open');
    }

    function submitEditImage()
    {
        $("#editImage").dialog('close');
        var url = site_url+"admin/gallery/updateImages/"+currentEditingImg;
    	$.post(url,{title: $("#updatingImgTitle").val(), description: $("#updatingImgDescription").val()},function(data){  
            if (data != "") {
                $("#errorMasseageDialog").empty().html(data);
                $("#errorMasseageDialog").dialog('open');
            }
    	});
    }

	function getGalleryImages(collID)
	{
		var url = site_url+"admin/gallery/getImages/"+collID;
		$.post(url,{ },function(data){
            var jsdata=$.parseJSON(data);
            $("#gallery_container"+collID).empty().html(jsdata.html);                         
		});
	}

	jQuery(document).ready(function()
	{

		$("#tabs").tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			},
            show: function(event, ui) {
                getGalleryImages(tabMapping[$("#tabs").tabs('option', 'selected')]);
            }
		});

		$(".addImage").button();
        $("#errorMasseageDialog").dialog({
			autoOpen: false,
			modal: true,
			resizable: false,
			title: "Ошибка",
			buttons: {
					"OK": function(){
                       window.location.replace(site_url+"admin/gallery");
				       $(this).dialog('close');
					}
				}
		});

		$("#addGalleryCollection").dialog({
			autoOpen: false,
			modal: true,
			width: 500,
			resizable: false,
			title: "Добавить Коллекцию",
			buttons: {
						'Добавить': submitCollectionForm,
						"Отменить": function(){
							$(this).dialog('close');
						}
					}
		});
        
       	$("#editImage").dialog({
			autoOpen: false,
			modal: true,
			width: 1030,
			resizable: false,
			title: "Добавить Коллекцию",
			buttons: {
						'Применить': submitEditImage,
						'Отменить': function(){
							$(this).dialog('close');
						}
					}
		});

        $('.fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                window.location.replace(site_url+"admin/gallery");

            },
            error: function (data) {
                $("#errorMasseageDialog").empty().html(data.responseText);
				$("#errorMasseageDialog").dialog('open');
            }
        });
	});

</script>

{/literal}